<template>
  <div class="paopao"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "paopao",
  props: ["config", "selectRangeDate"],
  data() {
    return {};
  },
  methods: {
    setData(type) {
      let arr = [];
      switch (type) {
        case "x":
          for (let i = 0; i < this.selectRangeDate.length; i++) {
            arr.push(
              this.selectRangeDate[i][1] + "." + this.selectRangeDate[i][2]
            );
          }
          break;
        case "s":
          for (let i = 0; i < this.selectRangeDate.length; i++) {
            arr.push((Math.random() * 250).toFixed(0));
          }
          break;

        default:
          break;
      }

      return arr;
    },
    setSeriesData() {
      let arr = [];
      this.config.data.forEach((item) => {
        let obj = {
          name: item.name,
          type: "line",
          smooth: true,
          symbol: "none",
          areaStyle: {
            opacity: 1,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: item.color[0], // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: item.color[0], // 40% 处的颜色
                },
                {
                  offset: 1,
                  color: item.color[1], // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //     offset: 0, color: item.color[0] // 0% 处的颜色
            // },
            //     {
            //         offset: 0.4, color: item.color[0] // 0% 处的颜色
            //     }, {
            //         offset: 1, color: item.color[1] // 100% 处的颜色
            //     }]), //背景渐变色
            // origin: 'start'
          },
          lineStyle: {
            width: 0,
          },
          itemStyle: {
            color: item.color[0],
          },
          data: this.setData("s"),
        };
        arr.push(obj);
      });
      return arr;
    },
    setChart() {
      var data = this.config;
      //偏移量
      var offsetData = [
        [30, 75],
        [70, 75],
        [90, 35],
        [10, 35],
        [50, 35],
      ];
      //symbolSize 散点气泡大小
      var symbolSizeData = [180, 180, 150, 150, 150];
      //
      //循环定义series的data值
      var datas = [];
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        //var itemToStyle = datalist[i];
        let name1 = "";
        let name2 = "";
        if (item.value != "") {
          name1 = `${item.name}`;
          name2 = `${item.data}`;
        } else {
          name1 = `${item.name}`;
          name2 = "";
        }
        datas.push({
          name: name1,
          new: name2,
          value: offsetData[i],
          symbolSize: symbolSizeData[i],
          formatter(p) {
            let { dataIndex, value, name } = p;
            return dataIndex === 0
              ? `{b0|${value[2]}}\n{c|${
                  name.length > 4 ? name.substr(0, 4) + "..." : name
                }}`
              : dataIndex < 5
              ? `{b|${value[2]}}\n{c|${
                  name.length > 4 ? name.substr(0, 4) + "..." : name
                }}`
              : "";
          },
          color: "#01FDFF",
          rich: {
            b0: {
              color: "#fff",
              align: "center",
              fontWeight: "bold",
              fontSize: 32,
            },
            b: {
              color: "#02F6F6",
              align: "center",
            },
            c: {
              fontWeight: "bold",
              color: "#00CEFF",
              align: "center",
            },
          },
          label: {
            normal: {
              textStyle: {
                fontSize: i === 0 ? 24 : 18,
                fontWeight: 1000,
                color: "#66ffc2",
              },
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.RadialGradient(0.3, 0.5, 0.7, [
                {
                  offset: 0,
                  color: "rgba(4,66,120,0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(4,100,120,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(1,98,156,0.6)",
                },
              ]),
              opacity: 1,
              shadowColor: "#045878",
              shadowBlur: 10,
              shadowOffsetX: 1,
              shadowOffsetY: 1,
            },
          },
        });
      }
      let option = {
        //   backgroundColor: "transparent",
        backgroundColor: "transparent",
        grid: {
          show: false,
          top: 10,
          bottom: 10,
        },
        xAxis: [
          {
            gridIndex: 0,
            type: "value",
            show: false,
            min: 0,
            max: 100,
            nameLocation: "middle",
            nameGap: 5,
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            scale: true,
            show: false,
            max: 100,
            nameLocation: "middle",
            nameGap: 30,
          },
        ],

        series: [
          {
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              show: true,
              formatter(p) {
                console.log(p);
                let { name } = p;
                return `{b|${p.data.new}}\n{c|${name}}`;
              },

              align: "center",
              verticalAlign: "center",
              rich: {
                a: {
                  color: "#fff",
                  fontSize: 26,
                  fontWeight: 1000,
                  lineHeight: 30,
                  textBorderColor: "#008B8B",
                  textBorderWidth: 2,
                },
                b: {
                  color: "#66ffc2",
                  fontSize: 24,
                  fontWeight: 1000,
                  lineHeight: 30,
                  textBorderColor: "transparent",
                  textBorderWidth: 0,
                },
                c: {
                  color: "#fff",
                  fontSize: 16,
                  fontWeight: 600,
                  lineHeight: 30,
                  textBorderColor: "transparent",
                  textBorderWidth: 0,
                },
              },
            },

            itemStyle: {
              normal: {
                color: "#00acea",
              },
            },
            data: datas,
          },
        ],
      };
      let myChart = this.$echarts(this.$el);

      myChart.clear();
      myChart.resize({
        width: this.$el.offsetWidth,
        height: this.$el.offsetHeight,
      });
      myChart.setOption(option);
    },
  },
  mounted() {
    this.setChart();
  },
};
</script>

<style lang="less" scoped>
.paopao {
  width: 100%;
  height: 90%;
}
</style>
